---
category: Level 1 — Basic
created: '2020-03-18'
keywords: display number of characters, maxlength attribute
title: Count the number of characters of a textarea
---

Assume that we have a `textarea` and a normal `div` elements for showing how many characters user has been entering:

```html
<textarea id="message"></textarea>
<div id="counter"></div>
```

## Use the `maxlength` attribute

The `maxlength` attribute sets the maximum number of characters that user can put in the textarea.

```html
<textarea maxlength="200" id="message"></textarea>
```

## Count the number of characters

Handle the `input` event which is triggered if the value of element is changed:

```js
const messageEle = document.getElementById('message');
const counterEle = document.getElementById('counter');

messageEle.addEventListener('input', function (e) {
    const target = e.target;

    // Get the `maxlength` attribute
    const maxLength = target.getAttribute('maxlength');

    // Count the current number of characters
    const currentLength = target.value.length;

    counterEle.innerHTML = `${currentLength}/${maxLength}`;
});
```

> **Good to know**
>
> The common mistake is to capture the `keyup` event. It doesn't work in some cases such as:
>
> -   User drags a text into the textarea
> -   User right-clicks in the textarea and chooses _Paste_ from the context menu

## Demo

<Playground>
```html
<div style="margin: 4rem auto; width: 16rem">
    <textarea rows="5" style="border: 1px solid #cbd5e0; width: 100%" maxlength="200" id="message"></textarea>
    <div style="margin-top: 0.25rem; text-align: right" id="counter">0</div>
</div>   
```

```js
document.addEventListener('DOMContentLoaded', function () {
    const messageEle = document.getElementById('message');
    const counterEle = document.getElementById('counter');
    const maxLength = messageEle.getAttribute('maxlength');

    counterEle.innerHTML = '0/' + maxLength;

    messageEle.addEventListener('input', function (e) {
        const target = e.target;
        const currentLength = target.value.length;
        counterEle.innerHTML = currentLength + '/' + maxLength;
    });
});
```
</Playground>

## See also

-   [Attach or detach an event handler](https://phuoc.ng/collection/html-dom/attach-or-detach-an-event-handler/)
-   [Get or set the html of an element](https://phuoc.ng/collection/html-dom/get-or-set-the-html-of-an-element/)
-   [Get set and remove attributes](https://phuoc.ng/collection/html-dom/get-set-and-remove-attributes/)
